<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ include file="/jsp/inc/header.jsp" %>
<c:set var="title" value="图片"/>
<c:set var="rootpath" value="${CONTEXT_PATH}/resource/picture"/>
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link href="${STATIC_HOST}/css/ligerui.css" rel="stylesheet" type="text/css"/>
  <link href="${STATIC_HOST}/css/common.css" rel="stylesheet" type="text/css" />
  <link href="${STATIC_HOST}/js/uploadify/uploadify.css" rel="stylesheet" type="text/css"/>

  <script src="${STATIC_HOST}/js/common-1.7.js" type="text/javascript"></script>
  <script src="${STATIC_HOST}/js/LG.js" type="text/javascript"></script>
  <script src="${STATIC_HOST}/js/uploadify/jquery.uploadify-3.1.min.js" type="text/javascript"></script>
  <style>
    .btn_file,.btn_class{cursor:pointer;}
    .btn_pic{ text-align: center; padding-top:10px;}
  </style>
  <title>${title}选择</title>
</head>
<body class="listbody">
<div id="tabMenu" style="margin-left:10px;width:98%;border:1px solid #ccf; ">
  <!------------------上传图片---------------------->
  <div title="上传图片">
    <div class="upload"><br><input type="file" class='btn_file' name="file" id="file" class='btn_file' value='上传文件' /></div>
    <div id="J_uploadData">
      <p class="imgWH"></p>
      <img class="preview" src=""/>
    </div>
    <div id="tpl_uploadData" style="display:none;">
      <div class= "uploadImg">
        <input type="hidden" class="imgId"/>
        <p class="imgWH"></p>
        <p>图片标题：<input class="imgTitle"/></p>
        <p>图片描述：<textarea class="imgMemo" rows="2" cols="80"></textarea></p>
        <img class="preview" src=""/>
      </div>
    </div>
  </div>
  <!------------------图片采集---------------------->
  <div title="图片采集">
    <table class="tblWrap" width="100%">
      <tr>
        <td>图片地址 <c:choose><c:when test="${param.multi=='1'}">（每个一行）</c:when></c:choose>：</td>
      </tr>
      <tr>
        <td>
          <c:choose><c:when test="${param.multi=='1'}"><textarea class="l-textarea" name="imgSrcURL" id="imgSrcURL"></textarea></c:when>
            <c:otherwise><input type="text"  name="imgSrcURL" id="imgSrcURL" ltype="text" ligerui="{'width':300}"/></c:otherwise></c:choose></td>
      </tr>
      <tr>
        <td><input  value="采集" type="button" class="l-button" onclick="pictureFetch()"/></td>
      </tr>
    </table>
    <div id="J_fetchData">
      <p class="imgWH"></p>
      <p class="imgTitle"></p>
      <img class="preview" src=""/>
    </div>
    <div id="tpl_fetchData" style="display:none;">
      <p class="imgWH"></p>
      <p class="imgTitle"></p>
      <img class="preview" src=""/>
    </div>
    <div style="display:none;"><iframe src="${STATIC_HOST}/jsp/admin/resource/picture/imgFetch.jsp?status=1" id="iframeRegion"></iframe></div>
  </div>

  <!------------------选择外部图片---------------------->
  <div title="选择外部图片">
    <table class="tblWrap" width="100%">
      <tr>
        <td>图片地址 ：（注意，图片会保存原图片地址）</td>
      </tr>
      <tr>
        <td><input type="text"  name="outsideImg" id="outsideImg" ltype="text" style="width: 500px;"/></td>
      </tr>
      <tr>
        <td><input  value="选择" type="button" class="l-button" onclick="getPicture()"/></td>
      </tr>
    </table>
    <div id="outsideImgData">
      <img class="preview" src=""/>
    </div>
  </div>
</div>
<c:if test="${param.noConfirm == null || !param.noConfirm.equals(\"1\") }">
  <div class="blank10"></div>
  <p class="tc">
    <input type="button" value="确认" class="l-button" onclick="parent.window.f_selectDO(f_selected())">
    <input type="button" value="取消" class="l-button" onclick="parent.window.f_selectCancel()">
  </p>
</c:if>

<script>

//  document.domain= "21cn.com";
  var obj = new Object();
  var objList= new Array;
  var uploadData = $('#tpl_uploadData').html();
  var fetchData= $('#tpl_fetchData').html();
  var $uploadDataList = $('#J_uploadData');
  var $fetchDataList = $('#J_fetchData');
  var srcList= new Array();
  function f_selected() {
    return objList;
  }
  function gopage(pageNo, pageSize) {
    jQuery("#pageNo").val(pageNo);
    if (pageSize) jQuery("#pageSize").val(pageSize);
    jQuery("#searchForm").submit();
  }
  function pictureFetch(){
    srcList= new Array();
    var postString="";
  <c:choose>
    <c:when test="${param.multi=='1'}">
      srcList= $("#imgSrcURL").val().split(/\n/g);
      postString= srcList[0];
      for(var i=1; i< srcList.length; i++){
        postString= postString+ ",21cn.com," +srcList[i];
      }
    </c:when>
    <c:otherwise>srcList[0]= $("#imgSrcURL").val();postString= srcList[0];</c:otherwise>
  </c:choose>
    var iframeWidow= document.getElementById('iframeRegion').contentWindow;
    iframeWidow.pictureFetch(postString);
  }
  function getPicture(){
    jQuery("#outsideImgData .preview").last().attr('src', jQuery("#outsideImg").val());
    obj = new Object();
    objList= new Array;
    obj.url = jQuery("#outsideImg").val();
    objList.push(obj);
  }
  function afterFetchImg(jsonData, target){
  <c:choose><c:when test="${param.multi=='1'}"></c:when><c:otherwise>
    if(!jsonData[srcList[0]].url){
      $.ligerDialog.warn('请输入正确的图片地址!');
      return;
    }
  </c:otherwise></c:choose>
    $fetchDataList.html(fetchData);
    obj = new Object();
    objList= new Array;
    obj.id = jsonData[srcList[0]].id;
    obj.title = jsonData[srcList[0]].title;
    obj.url = jsonData[srcList[0]].url;
    obj.width = jsonData[srcList[0]].width;
    objList[0]=obj;
    obj = new Object();
    $('#J_fetchData .preview').last().attr('src', jsonData[srcList[0]].url);
    $('#J_fetchData .imgWH').last().text('宽度：' + jsonData[srcList[0]].width + 'px    高度：' + jsonData[srcList[0]].height + 'px');
    $('#J_fetchData .imgTitle').last().text('图片标题：' + jsonData[srcList[0]].title);
  <c:choose><c:when test="${param.multi=='1'}">
    for(var i=1; i< srcList.length; i++){
      obj.id = jsonData[srcList[i]].id;
      obj.title = jsonData[srcList[i]].title;
      obj.url = jsonData[srcList[i]].url;
      obj.width = jsonData[srcList[i]].width;
      objList.push(obj);
      obj = new Object();
      $fetchDataList.append(fetchData);
      $('#J_fetchData .preview').last().attr('src', jsonData[srcList[i]].url);
      $('#J_fetchData .imgWH').last().text('宽度：' + jsonData[srcList[i]].width + 'px    高度：' + jsonData[srcList[i]].height + 'px');
      $('#J_fetchData .imgTitle').last().text('图片标题：' + jsonData[srcList[i]].title);
    }
  </c:when></c:choose>
  }
  $(function () {
    $("#tabMenu").ligerTab({onAfterSelectTabItem:function () {
      obj = new Object();
      objList= new Array;
    }});
    $("#searchForm").ligerForm();
    $(".selectPics ul li").live('mouseover',function () {
      $(this).addClass("over");
    }).live('mouseout',function () {
      $(this).removeClass("over");
    }).live('click', function () {
      var objImg = $(this).find('img');
      obj.id = objImg.attr('id');
      obj.url = objImg.attr('url');
      obj.src = objImg.attr('src');
      obj.title = objImg.attr('title').replace(/\"/g, "");
      obj.memo = objImg.attr('memo').replace(/\"/g, "");
      obj.width = objImg.attr('swidth');
      $(this).addClass("choosing");
      <c:choose><c:when test="${param.multi=='1'}">objList.push(obj);obj = new Object();</c:when>
      <c:otherwise>objList[0]=obj;$(this).siblings().removeClass("choosing");</c:otherwise></c:choose>
    });


    $('#file').uploadify({
      'swf':'/js/uploadify/uploadify.swf',
      'uploader':'${STATIC_HOST}/upload.do',
      'buttonText':'上传图片',
      'formData':{'uploadHandler':'pictureUploadHandler'},
      'fileTypeDesc':'支持格式:jpg/gif/jpeg/png.', //如果配置了以下的'fileExt'属性，那么这个属性是必须的
      'fileTypeExts':'*.jpg;*.gif;*.jpeg;*.png;', //允许的格式
      'fileSizeLimit':'50MB',
    <c:choose><c:when test="${param.multi=='1'}">'multi':true,</c:when>
    <c:otherwise>'multi':false,</c:otherwise></c:choose>
    'onUploadSuccess':function (file, data, response) {
      var uploadImg = eval('(' + data + ')');
      if (uploadImg.SUCCESS[0].url) {
        $('#preview').attr('src', uploadImg.SUCCESS[0].url);
        obj.id = uploadImg.SUCCESS[0].id;
        obj.url = uploadImg.SUCCESS[0].url;
        obj.title = uploadImg.SUCCESS[0].title;
        obj.memo = uploadImg.SUCCESS[0].memo;
        obj.width = uploadImg.SUCCESS[0].width;
      <c:choose><c:when test="${param.multi=='1'}">objList.push(obj);obj = new Object();
        $uploadDataList.append(uploadData);</c:when>
        <c:otherwise>objList[0]=obj;obj = new Object();</c:otherwise></c:choose>
        $('#J_uploadData .preview').last().attr('src', uploadImg.SUCCESS[0].url);
        $('#J_uploadData .imgWH').last().text('原始宽度：' + uploadImg.SUCCESS[0].width + 'px    原始高度：' + uploadImg.SUCCESS[0].height + 'px');
        /* console.log(uploadImg.SUCCESS[0]); */
        $('#J_uploadData .imgTitle').last().val(uploadImg.SUCCESS[0].title);
        $('#J_uploadData .imgId').last().val(uploadImg.SUCCESS[0].id);
        $('#J_uploadData .imgMemo').last().val(uploadImg.SUCCESS[0].memo);
      }
    }
  });
  <c:choose><c:when test="${param.multi=='1'}"></c:when>
  <c:otherwise>$("#imgSrcURL").ligerTextBox()</c:otherwise></c:choose>

  $(".uploadImg").live("blur",function(){
    var editImg= this;
    var updateData= $(this);
    jQuery.ajax({
      url: "${rootpath}/update.do",
      data: {
        id: $(".imgId", editImg).val(),
        title: $(".imgTitle", editImg).val().replace(/\"/g, ""),
        memo: $(".imgMemo", editImg).val().replace(/\"/g, "")
      },
      type: "POST",
      error: function(request) {
        //alert("error!");
      },
      success: function(jsonData) {
        //   console.log(jsonData);
      }
    });
    for(var i=0; i< objList.length; i++){
      if(objList[i].id== $(".imgId", editImg).val()){
        objList[i].title= $(".imgTitle", editImg).val().replace(/\"/g, "");
        objList[i].memo= $(".imgMemo", editImg).val().replace(/\"/g, "");
        break;
      }
    }
  });
  });


  function thisSelect() {

	    window.opener.setThumbPicUrl(objList);
		window.close();
		return;
	}
</script>
</body>
</html>